import React, { Component } from 'react'
import {
  Route,
  Redirect,
  Switch
} from 'react-router-dom';
import Todo from '../todo/Todo';
import Aldo from '../aldo/Aldo';
import NotFound from '../error/Error';
import SideMenu from './SideMenu';
import TopHeader from './TopHeader';
import { Layout } from 'antd';
import './home.css'
const { Content } = Layout;

class Home extends Component {

  render() {
    return (
      <Layout className="layout-box" style={{height: "100%"}}>
        <SideMenu></SideMenu>       
        <Layout className="site-layout"> 
          <TopHeader></TopHeader>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >                 
            <Switch>
              <Route path="/todo" component={Todo} />
              <Route path="/aldo" component={Aldo} />
              <Redirect from = "/" to = "/todo" exact></Redirect> 
              {/*exact代表精准匹配*/}
              <Route path = "*" component = { NotFound }></Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    )
  }
}

export default Home